"use client"
import React, { useRef, useState } from 'react';
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/pagination';


// import required modules
import { Pagination } from 'swiper/modules';
import Image from "next/image";

export default function SpecialtyBanner() {
    return (
        <>
            <Swiper
                autoplay={true}
                pagination={true} modules={[Pagination]} className="mySwiper">
                <SwiperSlide>
                    <Image src={'/images/foods/hg1.jpeg'} alt={'leemon'} width={1280} height={200} className={"aspect-[16/4] object-cover w-full"}/>
                </SwiperSlide>
                <SwiperSlide>
                    <Image src={'/images/foods/gz2.jpeg'} alt={'leemon'} width={1280} height={200} className={"aspect-[16/4] object-cover  w-full"}/>
                </SwiperSlide>
                <SwiperSlide>
                    <Image src={'/images/production/ningmeng.jpg'} alt={'leemon'} width={1280} height={200} className={"aspect-[16/4] object-cover  w-full"}/>
                </SwiperSlide>
            </Swiper>
        </>
    );
}
